<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态控制多个class</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="box">
        <!-- 给class动态绑定,传入一个对象 -->
        <div :class="['aa']">我可以动态控制多个class</div>
        <div :class="classObj">我可以动态控制多个class</div>
        <!-- 也可以传入一个数组,当传入数组时,该数组内的class名都将是生效状态 -->
        <div :class="classArr">我可以动态添加多个class</div>
    </div>
    <script>
        let obj = {
            data(){
                return {
                    // class变量名可以是 obj对象,要求该对象内的成员都是布尔值, 变量名为class名,值为true或false
                    classObj :{
                        // 为true时,此class会在标签上生效
                        aaa:true,
                        // 为false时,此class会在标签上消失
                        bbb:false,
                        ccc:true,
                    },
                    // 当变量值为数组时,可以随时push进去一个成员,使一个class生效,删除里面的某一个成员,则会使该class消失
                    classArr:['aaa','bbb','ccc'],
                }

            },
        }
        let app = Vue.createApp(obj).mount('#box')
    </script>
</body>
</html>